<template>
  <div class="bos">
    <!-- 最下面的背景图 -->
    <div class="middle">
      <!-- 遮慕层 -->
      <div class="shade">
        <!-- 最外层显示效果 -->
        <div class="navbar">
          <van-nav-bar
            title="编辑个人资料  "
            @click-left="$router.push('/mine')"
          >
            <template #left>
              <van-icon name="arrow-left" color="black" size="18px" />
            </template>
          </van-nav-bar>
        </div>

        <div class="navbar-mid">
          <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
          <!-- <van-uploader>
            <van-icon name="plus" />
          </van-uploader> -->
          <span @click="$router.push('/mine/phone')">更改头像</span>
        </div>
      </div>
    </div>
    <div class="foot">
      <!-- 昵称 -->
      <van-field
        placeholder="请填写昵称"
        input-align="right"
        is-link
        clickable
        label-align="left"
      >
        <template #label>
          <div class="size"><p>昵称</p></div>
        </template>
      </van-field>
      <!-- 简介 -->
      <van-field
        placeholder="请写个人简介，让大家更好认识你"
        input-align="right"
        is-link
        clickable
        label-align="left"
      >
        <template #label>
          <div class="size"><p>简介</p></div>
        </template>
      </van-field>
      <!-- 性别 -->
      <van-field
        placeholder="请输入性别"
        input-align="right"
        is-link
        clickable
        label-align="left"
      >
        <template #label>
          <div class="size"><p>性别</p></div>
        </template>
      </van-field>
      <!-- 生日 -->
      <van-field
        placeholder="请输入生日日期"
        input-align="right"
        is-link
        clickable
        label-align="left"
      >
        <template #label>
          <div class="size"><p>生日</p></div>
        </template>
      </van-field>
      <!-- 地址 -->
      <van-field
        placeholder="请输入当前居住城市"
        input-align="right"
        is-link
        clickable
        label-align="left"
      >
        <template #label>
          <div class="size"><p>当前城市</p></div>
        </template>
      </van-field>
      <!-- 背景图 -->
      <van-field
        placeholder="请选择主页背景图"
        input-align="right"
        is-link
        clickable
        label-align="left"
      >
        <template #label>
          <div class="size"><p>个人主页背景图</p></div>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { Image } from "@/api/request";
export default {
  // data() {
  //   return {
  //     img: "",
  //   };
  // },
  // methods: {
  //   submit() {
  //     Image(this.img).then((res) => {
  //       console.log(res);
  //     });
  //   },
  // },
};
</script>



<style lang="scss" scoped>
// .bos {
//   position: relative;
// }
.middle {
  background: url("https://img01.yzcdn.cn/vant/cat.jpeg");
  .shade {
    position: relative;
    width: 360px;
    height: 320px;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 208, 48, 0.7),
      rgba(145, 145, 74, 0.5)
    );
    z-index: 2;
    .navbar-mid {
      position: relative;
      img {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        display: inline-block;
        left: 37%;
        top: 55px;
      }
      .van-uploader {
        position: relative;

        top: 50px;
        left: 210px;
      }
      span {
        color: rgba(255, 255, 255, 0.867);
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        left: 39%;
        top: 160px;
      }
    }
  }
}
.foot {
  position: relative;
  bottom: 60px;
  z-index: 2;
  margin-top: -3px;
  .van-field {
    height: 55px;
    margin: 6px 4px;
    width: 350px;
    border: 2px solid rgba(37, 35, 35, 0.1);
    border-radius: 50px;
    padding-top: 16px;
    background-color: rgba($color: #fff, $alpha: 0.7);
    .size p {
      font-size: 18px !important;
      font-weight: 500;
      font-family: "微软雅黑";
    }
  }
}
</style>